import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Flex, WhiteSpace, InputItem, List, Picker, Button, Toast } from 'antd-mobile'
import Rate from 'rc-rate'
import { observer, inject } from 'mobx-react'
import { withRouter } from 'react-router'
import productCfg from 'constant/productCfg'
import getUrlParam from 'utils/getUrlParam'
import './Detail.scss'

@withRouter
@inject('productStore', 'loginStore')
@observer
class Detail extends Component {
  static propTypes = {
    productStore: PropTypes.object.isRequired,
    loginStore: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired,
  };

  state = {
    pickerValue: [3],
    money: '1000',
  };

  componentDidMount() {
    const id = getUrlParam('id')
    this.props.productStore.getProductById(id)
    this.props.loginStore.checkToken(window.localStorage.token)
    stat({
      category: '产品详情',
      action: '产品详情pv',
      label: `产品id-${id}`,
    })
  }

  dateFilter = (dateIndex) => {
    if (dateIndex) {
      const ret = productCfg.dateOptions.find(item => item.value === dateIndex)
      if (ret) {
        return ret.value
      }
      return null
    }
    return null
  };

  moneyChange = (money) => {
    this.setState({ money })
  };

  submit = () => {
    const { money, pickerValue } = this.state
    if (!money) {
      Toast.info('请输入金额', 2)
      return
    }

    if (pickerValue.length <= 0) {
      Toast.info('请选择贷款期限', 2)
      return
    }

    const { linkUrl } = this.props.productStore.productInfo
    const { isLogin } = this.props.loginStore
    const { history } = this.props
    const dateOptions = ['1天', '7天', '1个月', '3个月', '6个月', '12个月', '24个月', '36个月', '3年以上']
    const date = dateOptions[pickerValue[0] - 1]

    stat({
      category: '产品详情',
      action: '点击立即申请',
      label: `贷款金额:${money}--期限:${date}`,
      callback() {
        if (isLogin) {
          window.location.href = linkUrl
        } else {
          window.sessionStorage.nextState = linkUrl
          history.push('/login')
        }
      },
    })
  };

  render() {
    const { productStore: { productInfo } } = this.props
    const { money, pickerValue } = this.state

    return (
      <div styleName="detail">
        <Flex styleName="header" align="start">
          <img src={productInfo.logo} alt="" styleName="logo" />
          <Flex.Item>
            <p styleName="item-title">{productInfo.name}</p>
            <div styleName="success-rate">
              成功率：
              <Rate value={Number(productInfo.succRate)} allowHalf />
            </div>
            <p styleName="item-label">
              {productInfo.tags
                ? productInfo.tags.split('|').map(c =>
                  <span key={c}>{c}</span>,
                )
                : null
              }
            </p>
          </Flex.Item>
          <div styleName="applyNum">
            <span className="taupe">{productInfo.applyNum}</span>人申请通过
          </div>
        </Flex>
        <WhiteSpace />
        <div className="product">
          <List>
            <InputItem
              value={money}
              onChange={this.moneyChange}
              placeholder="请输入贷款金额"
              type="number"
              styleName="input-item"
            >
              贷款金额
            </InputItem>
          </List>
          <List>
            <Picker
              data={productCfg.dateOptions}
              cols={1}
              value={pickerValue}
              onChange={v => this.setState({ pickerValue: v })}
              extra="请选择贷款期限"
            >
              <List.Item arrow="horizontal">贷款期限</List.Item>
            </Picker>
          </List>
          <div styleName="desc">
            <Flex>
              <Flex.Item>贷款范围：{productInfo.loanRangeMin}-{productInfo.loanRangeMax}元</Flex.Item>
              <Flex.Item>借款期限：{this.dateFilter(productInfo.loanLimit)}</Flex.Item>
            </Flex>
            <Flex>
              <Flex.Item>最快放款时间：{this.dateFilter(productInfo.fastTime)}</Flex.Item>
              <Flex.Item>利率范围：{productInfo.rate}</Flex.Item>
            </Flex>
          </div>
        </div>
        <List renderHeader={() => '办理流程'} styleName="process">
          <List.Item>
            <img src={productInfo.proImg} alt="" />
          </List.Item>
        </List>
        <List renderHeader={() => '申请条件'}>
          <List.Item wrap>
            <div styleName="list-item">
              {productInfo.conditions
                ? productInfo.conditions.split('\n').map(c =>
                  <p key={c}>{c}</p>,
                )
                : null
              }
            </div>
          </List.Item>
        </List>
        <List renderHeader={() => '所需材料'}>
          <List.Item wrap>
            <div styleName="list-item">
              {productInfo.material
                ? productInfo.material.split('\n').map(c =>
                  <p key={c}>{c}</p>,
                )
                : null
              }
            </div>
          </List.Item>
        </List>
        <div className="footer-btn">
          <Button className="btn" type="primary" onClick={this.submit}>立即申请</Button>
        </div>
      </div>
    )
  }
}

export default Detail
